<template>
    <div class="container">
        <div>已完成{{ finishNum }}/全部{{ tasks.length }}</div>
        <div class="btn">
            <button @click="clearCompleted">清除已完成</button>
        </div>
    </div>
  
</template>

<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
    name: 'navFooter',
    props: {
        tasks: {
            type: Array,
            required: true
        }
    },
    emit: ['clearCompleted'],
    setup(props,context) {
        
        let finishNum = computed(() => {
            const finish =  props.tasks.filter(item => item.isComplete === true);
            return finish.length;
        }) 

        let clearCompleted = () => {
            context.emit('clearCompleted');
        }

        return {
            finishNum,
            clearCompleted
        }
    }
})
</script>

<style scoped lang="scss">
.container {
    display: flex;
    align-items: center;
    .btn {
        margin-left: 10px;
    }
}
</style>